<template>
    <van-loading v-if="loading" size="0.5rem"></van-loading>
    <van-icon
        v-else
        @click="onConllect"
        :color="value ? '#ffa500' : `#777`"
        :name="value ? 'star' : 'star-o'"
    />
</template>
<script>
// 监听图标的点击事件
// 在事件处理函数中判断是否收藏
// 收藏就调收藏接口
// 没有收藏就调删除收藏接口
import { addCollect, deleteCollect } from "@/api/articles";

export default {
    name: "CollectArticle",
    props: {
        value: {
            // 是否收藏
            type: Boolean,
            required: true,
        },
        id: {
            // 文章id
            type: [String, Number],
            required: true,
        },
    },
    data() {
        return {
            loading: false,
        };
    },
    methods: {
        async onConllect() {
            try {
                // 关锁，开启loading状态
                this.loading = true;
                // 判定是否收藏
                if (this.value) {
                    // 收藏
                    await addCollect(this.id);
                } else {
                    // 未收藏
                    await deleteCollect(this.id);
                }
                // 释放更新信号给父级
                this.$emit("input", !this.value);
            } finally {
                // 网络失败也要关锁
                this.loading = false;
            }
        },
    },
};
</script>
<style lang="less" scoped>
</style>
